<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title>经典之作</title>
	<link rel="stylesheet" href="css/经典之作.css" />
	<link rel="stylesheet" href="css/base.css" />
	<link rel="stylesheet" href="iconfont/font_fangdajin/iconfont.css" />
</head>

<body>
	<div id="trail-container"></div>
	<!-- 快捷导航模块开始 -->
	<div class="shortcut">
		<div class="w">
			<div class="LOGO">
				<img src="./img/d.png" alt="logo" />
			</div>
			<div class="Module_classify">
				<ul>
					<li><a href="./首页.html">首页</a></li>
					<li><a href="./杭州刺史.html">杭州刺史</a></li>
					<li><a href="./杭白政绩.html">杭白政绩</a></li>
					<li><a href="./经典之作.html">经典之作</a></li>
					<li><a href="./登录界面.html">登录</a></li>
				</ul>
			</div>

			<div class="search">
				<input type="search" placeholder="获取帮助" />
				<button><span class="iconfont icon-fangdajing"></span></button>
			</div>
		</div>
	</div>
	<!-- 快捷导航模块结束 -->

	<!-- 背景＋名字模块制作开始 -->
	<div class="bglo">
		<p class="jing">经</p>
		<p class="dian">典</p>
		<p class="zhi">之</p>
		<p class="zuo">作</p>
	</div>
	<!-- 背景＋名字模块制作结束 -->

	<!-- main部分制作开始 -->
	<!-- 主体部分 -->
	<div class="main w">
		<div class="text w">
			<h2>作品集</h2>
		</div>
		<div class="one w">
			<div class="image-container" data-id="1">
				<img src="./img/changhenge.jpg" alt="">
			</div>
			<div class='shige_one w'>
				<p>
					《长恨歌》的中心思想是批评唐玄宗重色误国导致安史之乱，同时又同情唐玄宗和杨贵妃的爱情悲剧，歌颂他们生死不渝的爱情。<br />
					&nbsp;&nbsp;白居易在写他们的罪恶一面时，注意点到为止，尽量不太损伤他们的形象，从而保证了悲剧故事前后的和谐统一。<br />
					&nbsp;&nbsp;故事中浪漫色彩的加入，爱情可以使生者死，可以使死者生，语言的精美，既生动、形象、凝练，又婉转、流利、韵律性强，使人传诵不绝。
				</p>
			</div>
		</div>

		<div class="tow w">
			<div class="image-container" data-id="2">
				<div>
					<img src="./img/pipaxing.jpg" alt="">
				</div>
				<div class='shige_tow w'>
					<p>
						《琵琶行》通过对歌妓琵琶女高超弹奏技艺和不幸人生经历的描述，揭露了封建社会官僚腐败、民生凋敝、人才埋没等不合理现象，表达了白居易对琵琶女的深切同情，也抒发了白居易对自身无辜被贬的愤懑之情。<br />
						&nbsp;&nbsp;全诗结构严谨，错落有致，情节曲折，波澜起伏；叙事与抒情紧密结合，塑造出完整鲜明的人物形象；语言流转匀称，优美和谐。<br />
						&nbsp;&nbsp;特别是描绘琵琶的演奏，比喻贴切，化虚为实，呈现出鲜明的音乐形象。
					</p>
				</div>
			</div>

			<div class="three w">
				<div class="image-container" data-id="3">
					<img src="./img/yijiangnan.jpg" alt="">
				</div>
				<div class='shige_three w'>
					<p>
						第一首词总写对江南的回忆，作者选择了江花和春水，衬以日出和春天的背景，运用比喻和映衬的手法，生动地描绘出江南春意盎然的大好景象。<br />
						&nbsp;&nbsp;第二首词描绘杭州之美，通过山寺寻桂和钱塘观潮的画面来验证江南之好，表达了作者对杭州的忆念之情。<br />
						&nbsp;&nbsp;第三首词歌咏苏州，选取竹叶春酒和吴娃醉舞，勾勒出苏州的旖旎风情，表达了作者对苏州的忆念与向往。
					</p>
				</div>
			</div>

			<!-- // 添加大图展示容器 -->
			<div id="modal" class="hidden">
				<div id="modal-content">
					<img id="modal-img" src="" alt="">
				</div>
				<div class="stars">
					<div class="star"></div>
					<div class="star" style="top: 120px; left: 158px; animation-delay: 1s;"></div>
					<div class="star" style="top: 150px; left: 178px; animation-delay: 2s;"></div>
					<div class="star" style="top: 160px; left: 208px; animation-delay: 1s;"></div>
					<div class="star" style="top: 130px; left: 258px; animation-delay: 3s;"></div>
					<div class="star" style="top: 150px; left: 558px; animation-delay: 1s;"></div>
					<div class="star" style="top: 80px; left: 800px; animation-delay: 3s;"></div>
					<div class="star" style="top: 40px; left: 646px; animation-delay: 2s;"></div>
					<div class="star" style="top: 120px; left: 395px; animation-delay: 4s;"></div>
					<div class="star" style="top: 160px; left: 765px; animation-delay: 1s;"></div>
					<div class="star" style="top: 170px; left: 1200px; animation-delay: 2s;"></div>
					<div class="star" style="top: 200px; left: 1000px; animation-delay: 1s;"></div>
					<div class="star" style="top: 220px; left: 1300px; animation-delay: 3s;"></div>
					<div class="star" style="top: 240px; left: 1100px; animation-delay: 1s;"></div>
					<div class="star" style="top: 260px; left: 1010px; animation-delay: 2s;"></div>
					<div class="star" style="top: 222px; left: 1200px; animation-delay: 3s;"></div>

					<div class="star" style="top: 195px; left: 1325px; animation-delay: 5s;"></div>
					<div class="star" style="top: 246px; left: 1394px; animation-delay: 2s;"></div>
					<div class="star" style="top: 184px; left: 1511px; animation-delay: 2s;"></div>
				</div>
			</div>
		</div>
		<!-- main部分制作结束 -->

		<!-- 结束部分footer制作开始 -->
		<div class="w">
			<footer>
				<h1>杭州相关名人和古诗</h1>
				<P>请联系我们<a href="#">19857979455</a> | 邮箱地址：<a href="#">3086547255@qq.com</a></P>
				<h3>版权所有&copy
					浙金院官网
					人工231王家侃
					学号2023630113
				</h3>
			</footer>
		</div>
		<!-- 结束部分footer制作结束 -->
		<script>
			// 鼠标拖尾效果
			document.addEventListener('DOMContentLoaded', () => {
				const trailContainer = document.getElementById('trail-container');
				const particles = [];
				let lastParticleTime = 0; // 用于记录上次生成粒子的时间

				document.addEventListener('mousemove', (e) => {
					const now = Date.now();
					if (now - lastParticleTime > 50) { // 控制生成频率
						createParticle(e.clientX, e.clientY);
						lastParticleTime = now;
					}
				});

				function createParticle(x, y) {
					const particle = document.createElement('img');
					particle.src = './img/shuimotexiao(dan).png'; // 使用透明背景图片
					particle.classList.add('particle');
					particle.style.left = `${x - 5}px`;
					particle.style.top = `${y - 5}px`;
					trailContainer.appendChild(particle);
					particles.push(particle);

					setTimeout(() => {
						particle.classList.add('fade');
						particle.addEventListener('animationend', () => {
							particle.remove();
							particles.splice(particles.indexOf(particle), 1);
						});
					}, 100); // 迅速开始淡出
				}

				setInterval(() => {
					particles.forEach((particle) => {
						if (particle.classList.contains('fade')) {
							particle.remove();
							particles.splice(particles.indexOf(particle), 1);
						}
					});
				}, 1000);

			});

			document.addEventListener('DOMContentLoaded', () => {
				const modal = document.getElementById('modal');
				const modalImg = document.getElementById('modal-img');

				// 点击图片打开大图
				document.querySelectorAll('.image-container img').forEach(img => {
					img.addEventListener('click', (e) => {
						modalImg.src = e.target.src;
						modal.classList.remove('hidden');
					});
				});

				// 点击空白处关闭大图
				modal.addEventListener('click', (e) => {
					if (e.target === modal || e.target === modalImg) {
						modal.classList.add('hidden');
					}
				});
			});
		</script>
</body>

</html>